<template>
  <div class="home">
    <Skeleton v-if="isLoading" />
    <div v-else>
      <!-- 头部地理位置和搜索框 -->
      <div class="head">
        <Header></Header>
        <banner-swiper :swiperList="swiperList"></banner-swiper>
        <notice-tip :homeAds="homeAds" />
        <!-- 广告图 -->
        <div class="adsImg" @click="gotoVip">
          <img :src="homeAds">
        </div>
      </div>
      <!-- navbar导航区 -->
      <div class="nav">
        <nav-bar :navBarList="navBarList" />
      </div>
      <vip-tip />
      <flash-sale :flashSaleProductsList="flashSaleProductsList" @goodsClick="gotoGoodsDetail"/>
      <special-zone :specialZoneList="specialZoneList"></special-zone>
      <tab-bar
        :flashSaleProductsList="flashSaleProductsList"
        :tabbarProductList="tabbarProductList"
        @goodsClick="gotoGoodsDetail">
      </tab-bar>
      <van-divider>我是有底线的 </van-divider>
    </div>
      <back-to-top />
  </div>
</template>

<script>
import GoodsInfo from '../../assets/js/goodsInfo'
import { getHomeData } from '../../network/home'
import { mapMutations, mapGetters } from 'vuex'
import Skeleton from '../../components/common/skeleton/Skeleton'
// import { ADD_TO_CART } from '../../config/pubsub-type'

import Header from '../../components/content/home/Header'
import BannerSwiper from '../../components/content/home/BannerSwiper'
import NoticeTip from '../../components/content/home/NoticeTip'
import NavBar from '../../components/content/home/NavBar'
import VipTip from '../../components/content/home/VipTip'
import FlashSale from '../../components/content/home/FlashSale'
import SpecialZone from '../../components/content/home/SpecialZone'
import TabBar from '../../components/content/home/TabBar'

export default {
  name: 'Home',
  data () {
    return {
      isLoading: true, // 加载动画
      swiperList: [], // 轮播图数据
      navBarList: [], // 导航栏数据
      flashSaleProductsList: [], // 限时抢购数据
      specialZoneList: {}, // 特色专区
      tabbarProductList: [],
      homeAds: '' // 首页广告
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  components: {
    Header,
    BannerSwiper,
    NoticeTip,
    NavBar,
    VipTip,
    FlashSale,
    SpecialZone,
    TabBar,
    Skeleton
  },
  created () {
    this._initData()
  },
  methods: {
    gotoVip () {
      this.$router.push({ name: 'MyVip' })
    },
    gotoGoodsDetail (item) {
      const goodsInfo = new GoodsInfo(item)
      this.$router.push({
        name: 'GoodsDetail',
        query: {
          ...goodsInfo
        }
      })
    },
    async _initData () {
      const res = await getHomeData()
      if (res.success) {
        const { data } = res
        this.swiperList = data.list[0].icon_list
        this.homeAds = data.home_ad.image_url
        this.navBarList = data.list[2].icon_list
        this.flashSaleProductsList = data.list[3].product_list
        this.tabbarProductList = data.list[12].product_list
        this.specialZoneList = data.special_zone
        this.isLoading = false
      }
    },
    ...mapMutations({
      addGoods: 'ADD_GOODS',
      addToCart: 'ADD_TO_CART'
    })
  }
}

</script>
<style lang='scss' scoped>
.home {
  background-color: '#f5f5f5';
  padding-bottom: px2rem(50);
  .head {
    margin-top: px2rem(-3);
    width: 100%;
    background-image: url('http://518taole.7-orange.cn/backImage.png');
    .adsImg {
      margin-top: px2rem(14);
      @include setWH(100%, px2rem(105));
      margin-bottom: px2rem(-3);
      img {
       @include setWH(100%, 100%);
        }
      }
    }
  /deep/ .van-divider {
    margin: 0;
    background: #f5f5f5;
  }
}
</style>
